<template>
    <el-card>
        <div class="flex items-center flex-jc-sb">
            <div class="fs-14 bold">其他数据</div>
            <el-select v-model="sltVal" size="small" @change="handleChange" style="width: 150px;">
                <el-option v-for="(item, index) in options" :key="item.insurCompany" :label="item.name"
                    :value="item.insurCompany"></el-option>
            </el-select>
        </div>
        <div class="flex mg-t-16 gap-16px" :class="{ 'flex-wrap': layout !== 'short' }">
            <div class="flex-item flex flex-1">
                <div class="flex-no-shrink w-120">
                    <div class="fs-14 fc-lightgrey">在保总人数</div>
                    <div class="flex mt-10px items-center">
                        <CountUp class="fs-24 bold fm-din-bold" :end-val="detail?.countAllEnsureStaff ?? 0" />
                        <div class="fs-12 mg-l-5 lh-24">人</div>
                    </div>
                    <div class="flex fs-12 mg-t-10 items-center">
                        <div class="fc-lightgrey">比昨天</div>
                        <div class="mg-l-5 flex items-center">
                            <template
                                v-if="(detail.countAllEnsureStaff ?? 0) - (detail.countAllEnsureStaffYesterday ?? 0) <= 0">
                                <span class="fc-success mg-r-5">{{ (detail.countAllEnsureStaff ?? 0) -
                                    (detail.countAllEnsureStaffYesterday ?? 0) }}</span>
                                <img src="@/assets/svg/chart/desc.svg" alt="">
                            </template>
                            <template v-else>
                                <span class="fc-error mg-r-5">+{{ (detail.countAllEnsureStaff ?? 0) -
                                    (detail.countAllEnsureStaffYesterday ?? 0) }}</span>
                                <img src="@/assets/svg/chart/asc.svg" alt="">
                            </template>
                        </div>
                    </div>
                </div>
                <div class="flex-2 chart-box">
                    <lightLineChart :data="chartData.protectionNum" />
                </div>
            </div>

            <div class="flex-item flex flex-1">
                <div class="flex-no-shrink w-120">
                    <div class="fs-14 fc-lightgrey">明日加保</div>
                    <div class="flex mt-10px items-center">
                        <CountUp class="fs-24 bold fm-din-bold" :end-val="detail?.tomorrowEnsure ?? 0" />
                        <div class="fs-12 mg-l-5 lh-24">人</div>
                    </div>
                    <div class="flex fs-12 mg-t-10 items-center">
                        <div class="fc-lightgrey">今日</div>
                        <div class="fc-success mg-l-5 fc-primary">{{ detail.todayEnsure }}</div>
                    </div>
                </div>
                <div class="flex-2 chart-box">
                    <lightLineChart color-type="green" :data="chartData.addNum" />
                </div>
            </div>

            <div class="flex-item flex flex-1">
                <div class="flex-no-shrink w-120">
                    <div class="fs-14 fc-lightgrey">今日减保</div>
                    <div class="flex mt-10px items-center">
                        <CountUp class="fs-24 bold fm-din-bold" :end-val="detail?.todayTerminalEnsure ?? 0" />
                        <div class="fs-12 mg-l-5 lh-24">人</div>
                    </div>
                    <div class="flex fs-12 mg-t-10 items-center">
                        <div class="fc-lightgrey">昨日</div>
                        <div class="fc-success mg-l-5 fc-primary">{{ detail.yesterdayTerminalEnsure }}</div>
                    </div>
                </div>
                <div class="flex-2 chart-box">
                    <lightLineChart color-type="blue" :data="chartData.reduceNum" />
                </div>
            </div>

            <div class="flex-item flex flex-1">
                <div class="flex-no-shrink w-120">
                    <div class="fs-14 fc-lightgrey">今日报案</div>
                    <div class="flex mt-10px items-center">
                        <CountUp class="fs-24 bold fm-din-bold" :end-val="detail?.todayReport ?? 0" />
                        <div class="fs-12 mg-l-5 lh-24">人</div>
                    </div>
                    <div class="flex">
                        <div class="flex fs-12 mg-t-10 items-center">
                            <div class="fc-lightgrey text-nowrap">昨日</div>
                            <div class="fc-success mg-l-5 fc-primary">{{ detail.yesterdayReport }}</div>
                        </div>
                        <div class="flex fs-12 mg-t-10 items-center mg-l-10">
                            <div class="fc-lightgrey text-nowrap">全部</div>
                            <div class="fc-success mg-l-5 fc-primary">{{ detail.allReport }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex-2 chart-box">
                    <lightLineChart color-type="green" :data="chartData.reportNum" />
                </div>
            </div>
        </div>
    </el-card>
</template>
<script setup>
import { ref, watch } from 'vue'
import lightLineChart from './lightLineChart.vue'
import CountUp from 'vue-countup-v3'
import { getInsuranceCompanyList, getOtherData, getSevenDaysOtherData } from '@/api/clients/signClient.ts'
import { getInsuranceCompany, getPeriodOtherData, getPayOpenNearlySeven } from '@/api/dashboard/longTerm.ts'

import wnumb from 'wnumb'
const format = wnumb({
    thousand: ','
})

const props = defineProps({
    title: {
        type: String
    },
    list: {
        type: Array
    },
    type: {
        type: String,
        default: ''
    },
    selectValue: {
        type: [String, Number]
    },
    layout: {
        type: String
    },
    companyId: {
        type: [String, Number]
    },
    insureType: {
        type: String,
        default: 'long'
    },
    queryData: {
        type: Object,
        default() {
            return {}
        }
    }
})

const emits = defineEmits(['update:selectValue', 'change'])

const sltVal = ref('')
const options = ref([])

// 签单客户长期保 保司
const getInsuranceCompanyOptions = () => {
    getInsuranceCompanyList({
        companyId: props.companyId
    }).then(res => {
        options.value = res
        options.value.unshift({
            name: '全部保司',
            insurCompany: ''
        })
    })
}

// 表盘数据保司
const getOptions = () => {
    getInsuranceCompany({}).then(res => {
        options.value = res
        options.value.unshift({
            name: '全部保司',
            insurCompany: ''
        })
    })
}

const emitsData = () => {
    emits('update:selectValue', sltVal.value)
    emits('change', sltVal.value)
    if (props.insureType === 'long') {
        getDataLong()
        getChartData()
    } else {
        getDataDashboardLong()
        getChartDataDashboard()
    }
}

const handleChange = () => {
    emitsData()
}

// 获取其他数据
const detail = ref({})
const getDataLong = () => {
    getOtherData({
        companyId: props.companyId,
        insurCompany: sltVal.value,
        ...props.queryData
    }).then(res => {
        detail.value = res
    })
}
// 获取 数据表盘其他数据
const getDataDashboardLong = () => {
    getPeriodOtherData({
        insurCompany: sltVal.value,
        ...props.queryData
    }).then(res => {
        detail.value = res
    })
}


// 趋势图
const chartData = ref({})
const getChartData = () => {
    getSevenDaysOtherData({
        companyId: props.companyId,
        insurCompany: sltVal.value,
        ...props.queryData
    }).then(res => {
        chartData.value = res
    })
}
const getChartDataDashboard = () => {
    getPayOpenNearlySeven({
        insurCompany: sltVal.value,
        ...props.queryData
    }).then(res => {
        chartData.value = res
    })
}
// 

const getData = () => {
    if (props.insureType === 'long') {
        if (props.companyId) {
            getInsuranceCompanyOptions()
            getDataLong()
            getChartData()
        }
    } else if (props.insureType === 'dashboardLong') {
        getOptions()
        getDataDashboardLong()
        getChartDataDashboard()
    }
}

watch(() => props.selectValue, (newval) => {
    sltVal.value = newval
}, {
    immediate: true
})

watch(() => props, (newval) => {
    getData()
}, {
    deep: true
})

defineExpose({
    getData
})

// watch(() => props.companyId, (newval) => {
//     if (newval) {
//         getInsuranceCompanyOptions()
//         getData()
//         getChartData()
//     } else {
//         getOptions()
//     }
// }, {
//     immediate: true
// })
</script>
<style lang="scss" scoped>
.flex-item {
    background: #FAFAFC;
    border-radius: 5px;
    padding: 12px;
}

.title-through {
    position: relative;

    &::after {
        display: block;
        content: '';
        width: calc(100% - 70px);
        height: 1px;
        background: #F4F4F7;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.flex-item {
    border-radius: 10px;
    padding: 12px 16px;
    flex-basis: calc(50% - 10px);
    box-sizing: border-box;
    border: 1px solid #EAEAEF;
}

.full-item {
    flex-basis: 100%;
}

.chart-box {
    width: 100%;
    height: 80px;
}

.w-120 {
    width: 120px;
}
</style>